import { h, defineComponent } from "@vue/runtime-core";
import startPageImg from "../../assets/bg.jpeg";
import buttonImg from "../../assets/button.png";
import { game } from "../Game";
export default defineComponent({
	setup(props, ctx) {
		// vue3 组件的初始化生命周期函数
		const onClick = () => {
			console.log("Clicking");
			ctx.emit("changePage", "GamePage");
		}
		return {
			onClick
		}
	},
	render(ctx) {
		// DOM
		// <div><img src="imgPath" /></div>
		// pixi
		// <container><sprite texture="imgPath"></sprite></container>
		return h("Container", [
			h("Sprite", { texture: startPageImg }),
			h("Sprite", {
				x: game.screen.width/2,
				y: game.screen.height/2, 
				texture: buttonImg,
				interactive: true,
				// onClick: () => {
				// 	console.log("Click");
				// 	// 发消息给上层，子组件发消息给父组件
				// },
				onClick: ctx.onClick
			}, "开始游戏")
		])
	}
})
